import React, { useState, useEffect } from 'react';
import SearchList from '@/components/SearchList';
import { Table, Button, notification, Tooltip } from 'antd';
import { transFormIndex, showDeleteConfirm } from '@/utils/util';
import {
  PlusCircleFilled,
  EyeFilled,
  EditFilled,
  DeleteFilled,
} from '@ant-design/icons';
import API from '@/api/xjindex.js';
import { useModel } from 'umi';

// 巡检管理
const operationManagement = ({ history }) => {
  const { initialState } = useModel('@@initialState');
  const [dataSource, setDataSource] = useState(null);
  const [orgList, setOrgList] = useState([]);
  const { orgId, userId } = initialState.info;
  const [params, setParams] = useState({
    pageNo: 1,
    pageSize: 10,
    unitId: '-1',
  });
  const [pagination, setPagination] = useState({
    total: 1, //总数
    pageSize: 10, //每条的页数
    current: 1,
    showQuickJumper: true,
  });

  const searchList = [
    {
      name: 'unitId',
      title: '单位名称',
      type: 'select',
      otherProps: {
        options: orgList,
      },
    },
  ];

  const columns = [
    {
      title: '序号',
      dataIndex: 'index',
      align: 'center',
      render: (text, r, index) => transFormIndex(pagination, index),
    },
    {
      title: '巡检标题',
      dataIndex: 'pollingTitle',
      align: 'center',
    },
    {
      title: '单位名称',
      dataIndex: 'orgName',
      align: 'center',
    },
    {
      title: '巡检时间',
      dataIndex: 'pollingTime',
      align: 'center',
    },
    {
      title: '创建人',
      dataIndex: 'createName',
      align: 'center',
    },
    {
      title: '操作',
      dataIndex: 'Operation',
      align: 'center',
      render: (text, r) => (
        <div>
          <Tooltip title="查看">
            <Button
              type="link"
              icon={<EyeFilled />}
              className="table-icon"
              onClick={checkLink.bind(null, r)}
            ></Button>
          </Tooltip>
          {r.createId == userId ? (
            <>
              <Tooltip title="编辑">
                <Button
                  type="link"
                  icon={<EditFilled />}
                  className="table-icon"
                  onClick={editLink.bind(null, r)}
                ></Button>
              </Tooltip>
              <Tooltip title="删除">
                <Button
                  type="link"
                  icon={<DeleteFilled />}
                  className="table-icon"
                  onClick={() => showDeleteConfirm(() => delFn(r.id))}
                ></Button>
              </Tooltip>
            </>
          ) : (
            ''
          )}
        </div>
      ),
    },
  ];

  const createLink = (r) => {
    history.push('/networkDefence/patrolManage/create');
  };
  const editLink = (r) => {
    const id = JSON.parse(r.id);
    history.push({
      pathname: '/networkDefence/patrolManage/edit',
      query: { id },
    });
  };
  const checkLink = (r) => {
    const id = JSON.parse(r.id);
    history.push({
      pathname: '/networkDefence/patrolManage/check',
      query: { id },
    });
  };

  const pageSizeChange = (page) => {
    setParams({
      ...params,
      pageNo: page.current,
      pageSize: page.pageSize,
    });
  };

  const delFn = (id) => {
    API.updatePomById({ id: id }).then((res) => {
      if (res) {
        notification.success({
          message: '删除成功',
        });
        initList(params);
      }
    });
  };
  const changeParams = (data) => {
    setParams({
      ...data,
      pageSize: 10,
      pageNo: 1,
    });
  };

  function initList(params = {}) {
    const dd = {
      pageSize: 10,
      pageNo: 1,
      unitId: '-1',
    };
    for (let d in dd) {
      if (params[d] === undefined) {
        params[d] = dd[d];
      }
    }
    API.getOrgList()
      .then((res) => {
        if (res) {
          setOrgList(
            res.t.map((item) => {
              return {
                label: item.name,
                value: item.id,
              };
            }),
          );
        }
      })
      .then(() => {
        API.showList(params).then((res) => {
          if (res) {
            setDataSource(res.t.queryList);
            setPagination({
              ...pagination,
              total: res.t.totalSize, //总数
              pageSize: res.t.pageSize, //每条的页数
              current: res.t.currentPage,
            });
          }
        });
      });
  }

  useEffect(() => {
    initList(params);
  }, [params]);
  return (
    <>
      <SearchList searchList={searchList} initList={changeParams}></SearchList>
      <div className="bgf main-x">
        {orgId == '101' ? (
          ''
        ) : (
          <div className="tools-x">
            <Button
              type="link"
              icon={<PlusCircleFilled />}
              className="btn-icon"
              onClick={createLink}
            >
              新增
            </Button>
          </div>
        )}
        <Table
          columns={columns}
          rowKey="id"
          dataSource={dataSource}
          pagination={pagination}
          className="custom-table"
          onChange={pageSizeChange}
        ></Table>
      </div>
    </>
  );
};

export default operationManagement;
